<template>
    <el-form ref="form" :model="formData" :label-width="formLabelWidth">

        <el-form-item label="名称/标识：">
            <span class="font-weight-bold">{{dataEntity.name}}  / {{dataEntity.id}}</span>
        </el-form-item>


        <template v-for="access in accesses">
            <el-form-item :label="(access.name + '(' + access.id + ')')" size="mini">


                <template v-if="'limit'==access.type">
                    <template v-for="(name,action) in (access.actions || {})">
                        <el-input v-model="formData[access.id][action]">
                            <template slot="prepend">{{name}}</template>
                        </el-input>
                    </template>
                </template>
                <template v-else>
                    <el-checkbox
                        :key="access.id"
                        :indeterminate="isIndeterminate[access.id]"
                        v-model="checkAll[access.id]"
                        @change="handleCheckAllChange(access.id)"
                        border>
                        全选
                    </el-checkbox>
                    <template v-for="(name,action) in (access.actions || {})">
                        <el-checkbox
                            size="mini"
                            class="line"
                            :false-label="0"
                            :true-label="1"
                            :key="access.id + action"
                            v-model="formData[access.id][action]"
                            @change="handleCheckedChange(access.id)"
                        >{{name}}
                        </el-checkbox>

                    </template>
                </template>

            </el-form-item>
        </template>


        <el-form-item label="">
            <el-button type="primary" @click="submit">保存</el-button>

        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        props: {
            formLabelWidth: {
                type: String,
                default: '200px'
            },
            dataEntity: {
                type: Object,
                default: null
            },

        },

        data() {
            return {
                accesses: [],
                formData: {},
                //formErrors: {},
                checkAll: {},
                isIndeterminate: {},

            }
        },
        created() {
            let _this = this;
            this.assignData();
        },
        destroyed() {

        },
        mounted() {
            let _this = this

        },
        methods: {
            assignData: function () {
                let _this = this;
                let role_id = LeUtils.valueGet(this.dataEntity, 'id');
                LeRoute.request('api.l-e-s.access-control.role.accesses.get', {role_id: role_id})
                    .then(function (res_data) {
                        _this.accesses = LeUtils.valueGet(res_data, 'data.accesses', [])
                        _this.formData = LeUtils.valueGet(res_data, 'data.owned_accesses', {})
                        for (let i in _this.accesses) {
                            if ('limit' != LeUtils.valueGet(_this.accesses[i], 'type', '')) {
                                _this.handleCheckedChange(LeUtils.valueGet(_this.accesses[i], 'id', ''))
                            }
                        }
                        //console.log(_this.accesses)
                    })


            },
            handleCheckAllChange(entity_id) {
                let _this = this;
                let val = LeUtils.valueGet(_this.checkAll, entity_id, false)
                let actions = LeUtils.valueGet(_this.formData, entity_id, {})
                for (let i in actions) {
                    actions[i] = val ? 1 : 0;
                }
                _this.formData[entity_id] = actions
                this.isIndeterminate[entity_id] = false;
            },
            handleCheckedChange(entity_id) {
                let _this = this;
                let actions = LeUtils.valueGet(_this.formData, entity_id, {})
                let checkAll = true;
                let isIndeterminate = false;
                for (let i in actions) {
                    if (0 == actions[i]) {
                        checkAll = false;
                    } else {
                        isIndeterminate = true;
                    }
                }
                this.checkAll[entity_id] = checkAll;
                this.isIndeterminate[entity_id] = isIndeterminate && !checkAll;
            },
            submit: function (event) {

                if (event) {
                    event.preventDefault()
                }
                let _this = this;
                let role_id = LeUtils.valueGet(this.dataEntity, 'id');
                LeRoute.request('api.l-e-s.access-control.role.accesses.save', {role_id:role_id,accesses:_this.formData}).then(function (res_data) {
                    _this.$message.success('保存成功')
                })
            },

        }
    }
</script>
